<route lang="json5" type="page">
{
  layout: 'default',
  needLogin: true,
  style: {
    navigationBarTitleText: '立即充值',
    navigationBarBackgroundColor: '#ffffff',
    navigationBarTextStyle: 'black',
    backgroundColor: '#f5f6fa',
  },
}
</route>

<template>
  <view class="recharge-container">
    <!-- 充值金额输入 -->
    <view class="input-section">
      <view class="input-box" :class="{ active: isInputFocus }">
        <text class="currency">¥</text>
        <input
          class="amount-input"
          type="digit"
          :value="inputAmount"
          placeholder="0.00"
          placeholder-class="placeholder"
          :maxlength="8"
          @change="handleAmountInput"
          @focus="isInputFocus = true"
          @blur="isInputFocus = false"
        />
      </view>
      <text class="balance-tips">当前余额 ¥{{ currentBalance.toFixed(2) }}</text>
    </view>

    <!-- 快捷金额选择 -->
    <view class="quick-amount-section">
      <text class="section-title">快捷充值</text>
      <view class="amount-grid">
        <view
          v-for="(amount, index) in quickAmounts"
          :key="index"
          class="amount-item"
          :class="{ selected: selectedAmount === amount }"
          @tap="selectQuickAmount(amount)"
        >
          ¥{{ amount }}
        </view>
      </view>
    </view>

    <!-- 充值协议 -->
    <view class="agreement-section">
      <checkbox-group @change="toggleAgreement">
        <label class="agreement-label">
          <checkbox :checked="isAgreed" color="#2979ff" />
          <text class="agreement-text">我已阅读并同意</text>
        </label>
      </checkbox-group>
      <text class="protocol-link" @tap="viewProtocol">《充值服务协议》</text>
    </view>

    <!-- 充值按钮 -->
    <view class="submit-section">
      <button
        class="recharge-btn"
        :class="{ disabled: !isValidForm }"
        :disabled="!isValidForm"
        @tap="handleSubmit"
      >
        立即充值 ¥{{ displayAmount }}
      </button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useToast } from 'wot-design-uni'
import { addBalance } from '@/service/user/info'
import { getBalanceInfo } from '@/service/user/balance'

const toast = useToast()

// 页面参数
const props = defineProps<{
  balance: number
}>()

const currentBalance = ref(props.balance || 0)
const inputAmount = ref('')
const selectedAmount = ref<number | null>(null)
const isAgreed = ref(false)
const isInputFocus = ref(false)
const MAX_AMOUNT = 50000 // 单笔最大充值金额

onMounted(async () => {
  const { code, data } = await getBalanceInfo()
  if (code === 200 && data) {
    currentBalance.value = data
  } else {
    toast.show('获取余额异常')
  }
})

// 快捷金额配置
const quickAmounts = [50, 100, 200, 500, 1000, 2000]

// 计算属性
const displayAmount = computed(() => {
  return parseFloat(inputAmount.value || '0').toFixed(2)
})

const isValidForm = computed(() => {
  const amount = parseFloat(inputAmount.value)
  return amount > 0 && amount <= MAX_AMOUNT && isAgreed.value
})

// 金额输入处理
const handleAmountInput = (event: Event) => {
  const value = (event.target as HTMLInputElement).value
  // 过滤非数字输入
  inputAmount.value = value.replace(/[^0-9.]/g, '')
  selectedAmount.value = null // 清空快捷选择
}

// 快捷金额选择
const selectQuickAmount = (amount: number) => {
  inputAmount.value = amount.toString()
  selectedAmount.value = amount
}

// 协议勾选
const toggleAgreement = () => {
  isAgreed.value = !isAgreed.value
}

let timer = null
// 提交充值
const handleSubmit = async () => {
  if (!isValidForm.value) return

  const amount = parseFloat(inputAmount.value)
  toast.loading({ msg: '支付处理中', cover: true })

  // 模拟支付流程
  const { code, data } = await addBalance(amount)
  inputAmount.value = ''

  toast.close()
  if (code === 200 && data) {
    currentBalance.value += amount
    toast.show(`充值成功 ¥${amount.toFixed(2)}`)
    timer = setTimeout(() => {
      uni.navigateBack()
    }, 500)
  } else {
    toast.show('系统异常')
  }
}

// 查看协议
const viewProtocol = () => {
  uni.navigateTo({
    url: '/pages/agreement/recharge',
  })
}

// 页面加载
onLoad((options) => {
  if (options.balance) {
    currentBalance.value = parseFloat(options.balance)
  }
})
onUnmounted(() => {
  if (timer !== null) {
    clearTimeout(timer)
  }
})
</script>

<style lang="scss" scoped>
.recharge-container {
  padding: 40rpx 32rpx;

  .input-section {
    margin-bottom: 64rpx;

    .input-box {
      display: flex;
      align-items: center;
      padding: 32rpx;
      background: #fff;
      border: 2rpx solid #eee;
      border-radius: 16rpx;
      transition: all 0.3s;

      &.active {
        border-color: $uni-bg-themes;
        box-shadow: 0 8rpx 24rpx rgba(41, 121, 255, 0.1);
      }

      .currency {
        margin-right: 16rpx;
        font-size: 56rpx;
        font-weight: 500;
        color: #333;
      }

      .amount-input {
        flex: 1;
        height: 80rpx;
        font-family: DINAlternate-Bold;
        font-size: 64rpx;
        color: #333;

        &::placeholder {
          color: #ccc;
        }
      }
    }

    .balance-tips {
      display: block;
      margin-top: 24rpx;
      font-size: 24rpx;
      color: #999;
      text-align: right;
    }
  }

  .quick-amount-section {
    .section-title {
      display: block;
      margin-bottom: 32rpx;
      font-size: 28rpx;
      color: #666;
    }

    .amount-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24rpx;

      .amount-item {
        padding: 32rpx;
        font-size: 32rpx;
        color: #333;
        text-align: center;
        background: #fff;
        border: 2rpx solid #eee;
        border-radius: 16rpx;
        transition: all 0.2s;

        &.selected {
          font-weight: 500;
          color: $uni-bg-themes;
          background: rgba(41, 121, 255, 0.05);
          border-color: $uni-bg-themes;
        }
      }
    }
  }

  .agreement-section {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 48rpx 0;

    .agreement-label {
      display: flex;
      align-items: center;

      .agreement-text {
        margin-left: 8rpx;
        font-size: 24rpx;
        color: #666;
      }
    }

    .protocol-link {
      margin-left: 8rpx;
      font-size: 24rpx;
      color: $uni-bg-themes;
    }
  }

  .submit-section {
    .recharge-btn {
      height: 96rpx;
      font-size: 32rpx;
      line-height: 96rpx;
      color: #fff;
      background: $uni-bg-themes;
      border-radius: 64rpx;
      transition: all 0.3s;

      &::after {
        border: none;
      }

      &.disabled {
        background: $uni-bg-themes-abate;
        opacity: 0.8;
      }
    }
  }
}
</style>
